<template>
	<view class="u-notice-bar-wrap" v-if="isShow" :style="{
		borderRadius: borderRadius + 'rpx',
	}">
		<block v-if="mode == 'horizontal' && isCircular">
			<u-row-notice
				:type="type"
				:color="color"
				:bgColor="bgColor"
				:list="list"
				:volumeIcon="volumeIcon"
				:moreIcon="moreIcon"
				:volumeSize="volumeSize"
				:closeIcon="closeIcon"
				:mode="mode"
				:fontSize="fontSize"
				:speed="speed"
				:playState="playState"
				:padding="padding"
				@getMore="getMore"
				@close="close"
				@click="click"
			></u-row-notice>
		</block>
		<block v-if="mode == 'vertical' || (mode == 'horizontal' && !isCircular)">
			<u-column-notice
				:type="type"
				:color="color"
				:bgColor="bgColor"
				:list="list"
				:volumeIcon="volumeIcon"
				:moreIcon="moreIcon"
				:closeIcon="closeIcon"
				:mode="mode"
				:volumeSize="volumeSize"
				:disable-touch="disableTouch"
				:fontSize="fontSize"
				:duration="duration"
				:playState="playState"
				:padding="padding"
				@getMore="getMore"
				@close="close"
				@click="click"
				@end="end"
			></u-column-notice>
		</block>
	</view>
</template>
<script>

export default {
	name: "u-notice-bar",
	props: {
		
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		
		type: {
			type: String,
			default: 'warning'
		},
		
		volumeIcon: {
			type: Boolean,
			default: true
		},
		
		volumeSize: {
			type: [Number, String],
			default: 34
		},
		
		moreIcon: {
			type: Boolean,
			default: false
		},
		
		closeIcon: {
			type: Boolean,
			default: false
		},
		
		autoplay: {
			type: Boolean,
			default: true
		},
		
		color: {
			type: String,
			default: ''
		},
		
		bgColor: {
			type: String,
			default: ''
		},
		
		mode: {
			type: String,
			default: 'horizontal'
		},
		
		show: {
			type: Boolean,
			default: true
		},
		
		fontSize: {
			type: [Number, String],
			default: 28
		},
		
		duration: {
			type: [Number, String],
			default: 2000
		},
		
		speed: {
			type: [Number, String],
			default: 160
		},
		
		
		isCircular: {
			type: Boolean,
			default: true
		},
		
		playState: {
			type: String,
			default: 'play'
		},
		
		
		disableTouch: {
			type: Boolean,
			default: true
		},
		
		borderRadius: {
			type: [Number, String],
			default: 0
		},
		
		padding: {
			type: [Number, String],
			default: '18rpx 24rpx'
		},
		
		noListHidden: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		
		isShow() {
			if(this.show == false || (this.noListHidden == true && this.list.length == 0)) return false;
			else return true;
		}
	},
	methods: {
		
		click(index) {
			this.$emit('click', index);
		},
		
		close() {
			this.$emit('close');
		},
		
		getMore() {
			this.$emit('getMore');
		},
		
		end() {
			this.$emit('end');
		}
	}
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";

.u-notice-bar-wrap {
	overflow: hidden;
}

.u-notice-bar {
	padding: 18rpx 24rpx;
	overflow: hidden;
}

.u-direction-row {
	@include vue-flex;
	align-items: center;
	justify-content: space-between;
}

.u-left-icon {
	@include vue-flex;
	align-items: center;
}

.u-notice-box {
	flex: 1;
	@include vue-flex;
	overflow: hidden;
	margin-left: 12rpx;
}

.u-right-icon {
	margin-left: 12rpx;
	@include vue-flex;
	align-items: center;
}

.u-notice-content {
	line-height: 1;
	white-space: nowrap;
	font-size: 26rpx;
	animation: u-loop-animation 10s linear infinite both;
	text-align: right;
	
	padding-left: 100%;
}

@keyframes u-loop-animation {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(-100%, 0, 0);
	}
}
</style>
